<template>
    <h1>条件渲染v-else-if</h1>
    <button @click="disable">type的值改变为B</button>
    <button @click="disableOther">type的值改变为其他</button>
    <div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
</template> 
 

  
<script setup>
import { ref, reactive, computed } from "vue";
const type = ref('A')
const disable = () => {
    // vue3需要使用.value来获取值，如果是vue2 就是用this
    type.value = 'B'
}
const disableOther = () => {
    // vue3需要使用.value来获取值，如果是vue2 就是用this
    type.value = ''
}

</script>



